<template>
  <Card>
    <Button icon="md-add" @click="isShowAddModal = true"
      >add the category</Button
    >
    <Table row-key="weight" :columns="columns16" :data="categoryList" border>
      <template slot-scope="{ row }" slot="status">
        <i-switch
          size="large"
          :true-value="0"
          :false-value="1"
          true-color="#13ce66"
          false-color="#ff4949"
          v-model="row.cate_status"
          ><span slot="open">展示</span>
          <span slot="close">隐藏</span></i-switch
        >
      </template>
      <template slot-scope="{ row }" slot="create_time">
        {{ row.cate_create_time | formatTime("yyyy-MM-dd : hh:mm:ss") }}
      </template>
      <template slot-scope="{ row }" slot="update_time">
        {{ row.cate_update_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
      </template>
      <template slot="action" slot-scope="{ row }">
        <!--        修改按钮-->
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="editCateBtn(row)"
          >edit
        </Button>
        <!--        删除按钮-->
        <Poptip
          confirm
          title="你确定删除这个友情链接吗?"
          @on-ok="confirmDeleteCate(row.cate_id)"
          @on-cancel="$Message.info('取消删除')"
          :transfer="true"
        >
          <Button type="error" size="small">Delete</Button>
        </Poptip>
        <!--        添加父类按钮-->
        <Button
          v-if="row.cate_parent === null && row.children.length === 0"
          type="primary"
          size="small"
          style="margin-left: 5px"
          @click="addCateParentBtn(row)"
          >add parent
        </Button>
      </template>
    </Table>
    <!--    添加文章分类-->
    <Modal
      v-model="isShowAddModal"
      title="添加文章分类"
      @on-ok="confirmAddCategory"
      @on-cancel="$Message.info('cancel add link')"
    >
      <Form
        ref="addCateFormRef"
        :label-width="80"
        :model="addForm"
        :rules="addFormRule"
      >
        <FormItem label="Categroy" prop="name">
          <Input v-model="addForm.name" placeholder="Enter Category" />
        </FormItem>
      </Form>
    </Modal>
    <!--    修改文章分类-->
    <Modal
      v-model="isShowEditModal"
      title="修改友情链接"
      @on-cancel="$Message.info('cancel edit link')"
      @on-ok="confirmEditCate"
    >
      <Form
        ref="editCateFromRef"
        :label-width="80"
        :model="editForm"
        :rules="editFormRule"
      >
        <FormItem label="name" prop="name">
          <Input v-model="editForm.name" />
        </FormItem>
        <FormItem label="parent" prop="parent">
          <Input v-model="editForm.parent" />
        </FormItem>
        <FormItem label="status" prop="status">
          <Input v-model="editForm.status" />
        </FormItem>
        <FormItem label="weight" prop="weight">
          <Input v-model="editForm.weight" />
        </FormItem>
      </Form>
    </Modal>
    <!--    增加文章分类父类modal-->
    <modal
      v-model="isShowAddParentModal"
      title="添加父分类"
      @on-cancel="$Message.info('cancel add parent')"
      @on-ok="addParent"
    >
      <Form
        ref="addCateParentFromRef"
        :label-width="80"
        :model="editForm"
        :rules="editFormRule"
      >
        <FormItem label="parent" prop="parent">
          <input v-model="editForm.parent" />
        </FormItem>
      </Form>
    </modal>
  </Card>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "Category",
  data() {
    return {
      columns16: [
        {
          title: "ID",
          key: "cate_id",
          tree: true
        },
        {
          title: "name",
          key: "cate_name"
        },
        {
          title: "status",
          slot: "status"
        },
        {
          title: "weight",
          key: "cate_weight"
        },
        {
          title: "create_time",
          slot: "create_time"
        },
        {
          title: "update_time",
          slot: "update_time"
        },
        {
          title: "Action",
          slot: "action",
          width: 300,
          align: "center"
        }
      ],
      addForm: {
        name: ""
      },
      addFormRule: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ]
      },
      editForm: {
        id: "",
        name: "",
        parent: "",
        weight: "0",
        status: "0",
        children: []
      },
      editFormRule: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        parent: [{}]
      },
      categoryList: [{}],
      isShowAddParentModal: false,
      isShowAddModal: false,
      isShowEditModal: false
    };
  },
  methods: {
    ...mapActions([
      "fetchAdminCategories",
      "addCategory",
      "editCate",
      "deleteCate"
    ]),
    async getCategories() {
      const res = await this.fetchAdminCategories();

      if (res.code === 2000) {
        this.categoryList = res.data.content;
      }
    },
    confirmAddCategory() {
      this.$refs.addCateFormRef.validate(async isValid => {
        // 验证不通过
        if (!isValid) {
          this.$Message.error("表单验证不通过");
          setTimeout(() => (this.isShowAddModal = true), 20);
        } else {
          const formData = Object.assign({}, this.addForm);
          this.$refs.addCateFormRef.resetFields();
          this.addForm = {
            name: ""
          };
          const res = await this.addCategory(formData);
          await this.getCategories();
          if (res.code === 2001) {
            this.$Message.success("插入成功");
            await this.getLink();
          } else {
            this.$Message.error("插入失败 message:" + res.message);
          }
        }
      });
    },
    editCateBtn(row) {
      this.editForm.id = row.cate_id;
      this.editForm.name = row.cate_name;
      this.editForm.parent = row.cate_parent;
      this.editForm.status = row.cate_status;
      this.editForm.weight = row.cate_weight;
      this.editForm.children = row.children;
      this.isShowEditModal = true;
    },
    confirmEditCate() {
      this.$refs.editCateFromRef.validate(async isValid => {
        if (!isValid) {
          this.$Message.error("表单验证不通过");
          setTimeout(() => (this.isShowEditModal = true), 2);
        } else {
          const formData = Object.assign({}, this.editForm);
          this.$refs.editCateFromRef.resetFields();
          const res = await this.editCate({ formData, id: this.editForm.id });
          this.editForm = {
            id: "",
            name: "",
            parent: "",
            status: "0",
            weight: "0"
          };
          await this.getCategories();
          if (res.code === 2002) {
            this.$Message.success("修改成功");
            await this.getCategories();
          } else {
            this.$Message.error("修改失败 message:" + res.message);
          }
        }
      });
    },
    async confirmDeleteCate(id) {
      const res = await this.deleteCate(id);
      if (res.code === 2003) {
        this.$Message.success(`删除<${res.data.cate_name}>成功`);
        this.getCategories();
      } else {
        this.$Message.error("删除失败");
      }
    },
    addCateParentBtn(row) {
      this.editForm.id = row.cate_id;
      this.editForm.name = row.cate_name;
      this.editForm.parent = row.cate_parent;
      this.editForm.status = row.cate_status;
      this.editForm.weight = row.cate_weight;
      this.editForm.children = row.children;
      this.isShowAddParentModal = true;
    },
    addParent() {
      this.$refs.addCateParentFromRef.validate(async isValid => {
        if (!isValid) {
          this.$Message.error("表单验证不通过");
          setTimeout(() => (this.isShowEditModal = true), 2);
        } else {
          const formData = Object.assign({}, this.editForm);
          this.$refs.editCateFromRef.resetFields();
          const res = await this.editCate({ formData, id: this.editForm.id });
          this.editForm = {
            id: "",
            name: "",
            parent: "",
            status: "0",
            weight: "0"
          };
          await this.getCategories();
          if (res.code === 2002) {
            this.$Message.success("修改父类成功");
            await this.getCategories();
          } else {
            this.$Message.error("修改父类失败 message:" + res.message);
          }
        }
      });
    }
  },
  created() {
    this.getCategories();
  }
};
</script>

<style lang="less" scoped></style>
